<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件注册</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 组件名 
        Vue.component('my-component-name', { /* ... */ })
        Vue.component('MyComponentName', { /* ... */ })
    -->
    <!-- 全局注册 
        以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
    -->
    <div id="app">
        <component-a></component-a>
        <component-b></component-b>
        <component-c></component-c>
    </div>

    <!-- 局部注册 
        局部注册的组件在其子组件中不可用
    -->
    <div id="app1">
        <component-a></component-a>
        <component-b></component-b>
    </div>
</body>
<script>
    Vue.component('component-a', { template: `<h3>aaa</h3>` })
    Vue.component('component-b', { template: `<h3>bbb</h3>` })
    Vue.component('component-c', { template: `<h3>ccc</h3>` })

    new Vue({ el: '#app' })

    var ComponentA = { template: `<h3>AAA</h3>` }
    var ComponentB = { template: `<h3>BBB</h3>` }
    var ComponentC = { template: `<h3>CCC</h3>` }

    new Vue({
        el: '#app1',
        components: {
            'component-a': ComponentA,
            'component-b': ComponentB
        }
    })

</script>

</html>